<template>
	<view class="page-container">
		<view class="nav-container">
			<view :class="'nav-item ' + (!couponCodeStatus ? 'active' : '')" data-status="0" data-index="0"
				@tap.stop.prevent="changeStatus">
				<text>全部</text>
				<view v-if="couponCodeStatus == ''" class="active-tag"
					:style="'background-color: ' + platformConfig.baseColor + ';'"></view>
			</view>
			<view :class="'nav-item ' + (couponCodeStatus == 1 ? 'active' : '')" data-status="1" data-index="1"
				@tap.stop.prevent="changeStatus">
				<text>未使用</text>
				<view v-if="couponCodeStatus == 1" class="active-tag"
					:style="'background-color: ' + platformConfig.baseColor + ';'"></view>
			</view>
			<view :class="'nav-item ' + (couponCodeStatus == 2 ? 'active' : '')" data-status="2" data-index="2"
				@tap.stop.prevent="changeStatus">
				<text>已使用</text>
				<view v-if="couponCodeStatus == 2" class="active-tag"
					:style="'background-color: ' + platformConfig.baseColor + ';'"></view>
			</view>
			<view :class="'nav-item ' + (couponCodeStatus == 3 ? 'active' : '')" data-status="3" data-index="3"
				@tap.stop.prevent="changeStatus">
				<text>已过期/失效</text>
				<view v-if="couponCodeStatus == 3" class="active-tag"
					:style="'background-color: ' + platformConfig.baseColor + ';'"></view>
			</view>
		</view>
		<view class="main-container">
			<!-- parse <template is="coupon" :data="couponArr,couponCodeStatus, baseurl"></template> -->
			<block name="coupon">
				<view class="temp-coupon-list" v-if="couponArr && couponArr.length > 0">
					<view
						:class="'temp-coupon-item ' + (couponCodeStatus == 2 || couponCodeStatus == 3 ? 'temp-coupon-offline' : '')"
						v-for="(item, index) in couponArr" :key="index">
						<view :class="'temp-coupon-item-left ' + ('origin' + item.couponOrigin)"
							:style="'color:' + (item.couponOrigin == '0' ? '#ff7303' : '#FF1744') + ';background: ' + (item.couponSource == '2' ? '#ffc4bd' : '') + ';'">
							<!-- 优惠券预览图 -->
							<image style="width: 100%; height: 100%"
								v-if="'7' == item.couponType && !util.isEmpty(item.pic)"
								:src="baseurl + '/' + item.pic"></image>
							<image style="width: 100%; height: 100%"
								v-else-if="'7' == item.couponType && !util.isEmpty(item.picUrl)"
								:src="baseurl + '/' + item.picUrl"></image>
							<image style="width: 100%; height: 100%" v-else-if="'7' == item.couponType"
								src="/static/image/coupon/default_icon.png"></image>
							<image class="temp-coupon-origin"
								v-if="(item.couponOrigin == '0' || item.couponOrigin == '') && (item.couponSource == '1' || item.couponSource == '7')"
								src="/static/image/common/coupon_origin/ic_sjq.png"></image>
							<image class="temp-coupon-origin"
								v-if="(item.couponOrigin == '0' || item.couponOrigin == '') && item.couponSource == '2'"
								src="/static/image/common/coupon_origin/ic_ptq.png"></image>
							<image class="temp-coupon-origin" v-if="item.couponOrigin == '1'"
								src="/static/image/common/coupon_origin/ic_wxq.png"></image>
							<image class="temp-coupon-origin" v-if="item.couponOrigin == '2'"
								src="/static/image/common/coupon_origin/ic_ysf.png"></image>
							<image class="temp-coupon-origin" v-if="item.couponOrigin == '3'"
								src="/static/image/common/coupon_origin/ic_zfb.png"></image>
							<image class="temp-coupon-origin"
								v-if="item.couponOrigin == '0' && item.couponSource == '6'"
								src="/static/image/common/coupon_origin/ic_zjq.png"></image>
							<view class="temp-coupon-discount-info" v-if="'7' != item.couponType">
								<block
									v-if="'1' == item.couponType || '3' == item.couponType || '5' == item.couponType || '6' == item.couponType">
									<text class="temp-icon-price">￥</text>
									<text class="temp-icon-discount" v-if="item.discountLength == 5"
										style="font-size: 44rpx">{{ formatFenMoney(item.discountAmt) }}</text>
									<text class="temp-icon-discount" v-else-if="item.discountLength == 6"
										style="font-size: 36rpx">
										{{ formatFenMoney(item.discountAmt) }}
									</text>
									<text class="temp-icon-discount" v-else-if="item.discountLength >= 7"
										style="font-size: 32rpx">
										{{ formatFenMoney(item.discountAmt) }}
									</text>
									<text class="temp-icon-discount"
										v-else>{{ formatFenMoney(item.discountAmt) }}</text>
								</block>
								<block v-if="'2' == item.couponType || '4' == item.couponType">
									<text class="temp-icon-discount">{{ item.discountAmt }}</text>
									<text class="temp-icon-price">折</text>
								</block>
							</view>
						</view>

						<view class="temp-coupon-item-middle">
							<view class="temp-coupon-tips" v-if="item.couponOrigin == '1' && item.usedTips">
								{{ item.usedTips }}</view>
							<view class="temp-coupon-middle-top">
								<text class="temp-coupon-name"
									v-if="'6' == item.couponType || '7' == item.couponType">{{ item.couponName }}</text>
								<text class="temp-coupon-name" v-else>满{{ formatFenMoney(item.useCondAmt) }}元可用</text>
								<text class="temp-coupon-type reduce"
									v-if="item.couponType == '1' || '3' == item.couponType || '5' == item.couponType">满减券</text>
								<text class="temp-coupon-type"
									v-if="item.couponType == '2' || '4' == item.couponType">折扣券</text>
								<text class="temp-coupon-type reduce" v-if="'6' == item.couponType">代金券</text>
								<text class="temp-coupon-type reduce" v-if="'7' == item.couponType">兑换券</text>
							</view>
							<view class="temp-coupon-middle-bottom">
								<view v-if="item.expireDateType == 1">活动期至{{ item.expireEndTime }}</view>
								<view v-if="item.expireDateType == 2">领取后{{ item.expireDaysNum }}天有效</view>
							</view>
						</view>

						<block v-if="item.qrcode">
							<view class="temp-coupon-item-right" :data-coupon="item" @tap.stop.prevent="goToCoupon">
								<view class="temp-coupon-right-get">{{ couponCodeStatus == 1 ? '立即使用' : '查看' }}</view>
							</view>
						</block>

						<block v-else>
							<view class="temp-coupon-item-right" v-if="item.isFree" :data-coupon="item"
								@tap.stop.prevent="goToCoupon">
								<view class="temp-coupon-right-get" v-if="couponBtnText != null">{{ couponBtnText }}
								</view>
								<view class="temp-coupon-right-get" v-else-if="item.isLineIssuedStamps != '1'">立即领取
								</view>
								<view v-else>扫码领取</view>
							</view>
							<view class="temp-coupon-item-right" v-if="!item.isFree" :data-coupon="item"
								@tap.stop.prevent="goToCoupon">
								<view class="temp-coupon-buy-price" v-if="item.exchangeType == 1">
									<text>{{ item.exchangePoint }}</text>
									<text>积分</text>
								</view>
								<view class="temp-coupon-buy-price" v-if="item.exchangeType == 2">
									<text>￥</text>
									<text>{{ item.exchangePrice }}</text>
								</view>
								<view class="temp-coupon-buy-price temp-price-point" v-if="item.exchangeType == 3">
									<text style="font-size: 28rpx; font-weight: 600">{{ item.exchangePoint }}</text>
									<text style="font-size: 18rpx">积分</text>
									<text style="font-size: 18rpx">+</text>
									<text style="font-size: 18rpx">￥</text>
									<text style="font-size: 28rpx; font-weight: 600">{{ item.exchangePrice }}</text>
								</view>
								<view class="temp-coupon-right-get" v-if="couponBtnText != null">{{ couponBtnText }}
								</view>
								<view class="temp-coupon-right-get" v-else-if="item.isLineIssuedStamps != '1'">去兑换
								</view>
								<view v-else>扫码领取</view>
							</view>
						</block>
					</view>
				</view>
				<view class="temp-coupon-list" v-else>
					<view class="temp-coupon-empty">
						<image class="temp-coupon-empty-img" src="/static/image/icon_coupon_empty.png"></image>
						<text class="temp-coupon-empty-tip">暂无优惠券</text>
					</view>
				</view>
			</block>
		</view>
		<!-- 返回主页按钮 -->
		<gohome id="gohome"></gohome>
	</view>
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
	import {
		http
	} from '@/utils/commonRequest.js'; // 局部引入
	import gohome from '@/components/gohome/gohome';
	const app = getApp();

	const util = require('../../../utils/util.js');

	const utils = require('../../../utils/util.js');

	export default {
		components: {
			gohome
		},
		data() {
			return {
				currentIndex: 0,
				couponArr: [],
				couponArrData: [],
				couponCodeStatus: '',

				//1:未使用 2:已使用 3:已过期
				platformConfig: app.globalData.platformConfig,

				baseurl: app.globalData.baseurl,
				allHaveMore: false,
				templete: [],
				pageInfo: '',
				loading: false,
				couponBtnText: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.platformConfig = app.globalData.platformConfig,
				this.couponCodeStatus = options.couponCodeStatus ? options.couponCodeStatus : ''
			let that = this;
			this.pageDataArr = [{
					page: 1,
					haveMore: true
				},
				{
					page: 1,
					haveMore: true
				},
				{
					page: 1,
					haveMore: true
				},
				{
					page: 1,
					haveMore: true
				}
			];
			this.limitNum = 10; //初始化分页请求参数

			this.$checkLogin().then((res) => {
				that.queryCouponArr();
			});
		},
		onShow: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			let currentIndex = this.currentIndex;
			let pageInfo = this.pageDataArr[currentIndex];

			if (pageInfo.haveMore) {
				this.queryCouponArr();
			}
		},
		methods: {
			formatFenMoney(s) {
				if (undefined == s || '' == s || null == s) {
					return 0;
				} else {
					return (s / 100)
				}
			},
			changeStatus: function(e) {
				let couponCodeStatus = e.currentTarget.dataset.status != 0 ? e.currentTarget.dataset.status : '';
				let index = e.currentTarget.dataset.index;
				this.couponCodeStatus = couponCodeStatus
				this.currentIndex = index
				this.allHaveMore = false
				this.templete = []
				let couponArr = this.couponArrData[index] ? this.couponArrData[index] : [];
				this.couponArr = couponArr
				console.log('couponArr==',couponArr,this.couponArrData)
				if (!couponArr || couponArr.length == 0) {
					uni.pageScrollTo({
						scrollTop: 0
					});
					this.queryCouponArr();
				}
			},

			/** 获取门店券列表 */
			queryCouponArr: function() {
				let that = this;
				let currentIndex = that.currentIndex;
				let pageInfo = that.pageDataArr[currentIndex];

				if (!pageInfo.haveMore) {
					return;
				}

				let params = {
					page: pageInfo.page,
					limit: that.limitNum,
					couponCodeStatus: that.couponCodeStatus
				};
				let couponArrData = that.couponArrData;
				utils.showLoading('加载中');
				http.get('zsnshCoupon/myCouponList', {
					params: params
				}).then((res) => {
					if (200 == res.data.code) {
						// console.log(res);
						pageInfo.haveMore = res.data.haveMore;
						pageInfo.page++;
						that.pageDataArr[currentIndex] = pageInfo;
						let list = res.data.couponList;
						let couponList = that.couponArrData[currentIndex] ? that.couponArrData[currentIndex] :
							[];
						couponList = couponList.concat(list);
						let couponArr = [];
						couponList.map((v, i) => {
							if (v.couponOrigin != '1') {
								couponArr.push(v);
							} else if (0 == currentIndex && v.couponOrigin == '1') {
								v.usedTips = '使用情况以微信卡包为准';
								couponArr.push(v);
							}
						});
						couponArrData[currentIndex] = couponArr;
						couponArr.map((v) => {
							let num = v.discountAmt / 100;
							let str = num.toString();
							v.discountLength = str.length;
						});
						console.log(couponArr);
						this.couponArr = couponArr
						this.couponArrData = couponArrData
						this.pageInfo = pageInfo
					} else {
						console.log('优惠券列表查询失败：', res.data.msg);
					}

					utils.hideLoading();
					this.loading = false
				});
			},

			goToCoupon: function(e) {
				let coupon = e.currentTarget.dataset.coupon;
				uni.navigateTo({
					url: '/pages/coupon/couponCodeDetail/couponCodeDetail?payId=' + coupon.payId + '&code=' +
						coupon
						.couponCode + '&id=' + coupon.couponId
				});
			}
		}
	};
</script>
<style>
	/* @import '../../../templates/zsnshTemplates.css'; */

	.page-container {
		position: relative;
	}
	
	.temp-coupon-offline {
		pointer-events: none;
	}

	.nav-container {
		position: -webkit-sticky;
		position: sticky;
		z-index: 1;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		height: 118rpx;
		background: #ffffff;
		box-shadow: 0px 8px 28px 0px rgba(182, 178, 199, 0.2);
	}

	.nav-item {
		position: relative;
		color: #666;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 44rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.active {
		color: #000;
		line-height: 50rpx;
		font-size: 36rpx;
	}

	.active-tag {
		margin-top: 3px;
		width: 80rpx;
		height: 8rpx;
		border-radius: 4rpx;
	}

	.main-container {
		position: relative;
		margin: 30rpx 0;
	}

	/* 优惠券样式 */
	.temp-coupon-item {
		overflow: hidden;
		display: flex;
		margin: 0 auto 24rpx;
		width: 686rpx;
		height: 156rpx;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 20rpx 0px rgba(28, 38, 69, 0.1);
		border-radius: 16rpx;
	}

	.temp-coupon-item-left {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 156rpx;
		height: 100%;
		/* background: linear-gradient(140deg, #FFC996 0%, #FC4C2C 100%); */
		color: #ff262e;
	}

	.temp-coupon-origin {
		width: 76rpx;
		height: 76rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.temp-coupon-discount-info {
		display: flex;
		align-items: flex-end;
		letter-spacing: -1px;
		line-height: 1;
	}

	.temp-icon-discount {
		font-size: 58rpx;
		font-weight: bold;
	}

	.temp-icon-price {
		font-size: 28rpx;
	}

	.temp-coupon-item-middle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 342rpx;
		margin: 16rpx 0;
		padding: 0 10rpx;
		border-right: 2px dashed rgba(0, 0, 0, 0.1);
	}

	.temp-coupon-tips {
		font-size: 24rpx;
		font-weight: 400;
		color: #ff4e4f;
		margin-bottom: 6rpx;
	}

	.temp-coupon-middle-top {
		display: flex;
		align-items: center;
	}

	.temp-coupon-type {
		padding: 0 10rpx;
		line-height: 40rpx;
		background: #FD966B;
		border-radius: 18rpx;
		color: #fff;
		font-size: 20rpx;
	}

	.temp-coupon-type.reduce {
		background: linear-gradient(143deg, #ffb4ab 0%, #ff9386 100%);
	}

	.temp-coupon-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* margin-left: 10rpx; */
		margin-right: 8rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		letter-spacing: -1px;
		max-width: 220rpx;
	}

	.temp-coupon-middle-bottom {
		margin-top: 10rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color: #777;
		letter-spacing: -0.5px;
	}

	.temp-coupon-item-right {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.temp-coupon-item-right::before {
		position: absolute;
		content: ' ';
		width: 24rpx;
		height: 12rpx;
		background-color: rgba(28, 38, 69, 0.1);
		top: 0;
		left: -14rpx;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	.temp-coupon-item-right::after {
		position: absolute;
		content: ' ';
		width: 24rpx;
		height: 12rpx;
		background-color: rgba(28, 38, 69, 0.1);
		bottom: 0;
		left: -14rpx;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
	}

	.temp-coupon-buy-price {
		color: #FF4B00;
		font-size: 28rpx;
		letter-spacing: -1px;
		line-height: 44rpx;
		margin-bottom: 8rpx;
	}

	.temp-price-point {
		font-size: 24rpx;
	}

	.temp-coupon-right-get {
		width: 128rpx;
		line-height: 52rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		background: linear-gradient(140deg, #FFC996 0%, #FC4C2C 100%);
		box-shadow: 0px 4rpx 8rpx 0px rgba(253, 96, 61, 0.22);
		border-radius: 26rpx;
	}

	.temp-coupon-empty {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.temp-coupon-empty-img {
		width: 644rpx;
		height: 310rpx;
	}

	.temp-coupon-empty-tip {
		font-size: 28rpx;
		font-family: PingFangSC-Light, PingFang SC;
		font-weight: 300;
		color: #666666;
		line-height: 40rpx;
		margin-top: 44rpx;
	}

	/* 优惠券来源 */
	.origin0 {
		background-color: #ffe4d6;
	}

	.origin1 {
		background-color: #c8e6c9;
	}

	.origin2 {
		background: rgba(255, 23, 68, 0.23);
	}

	.origin3 {
		background: rgba(22, 119, 255, 0.23);
	}

	.origin1 {
		background: #c8e6c9;
	}

	.origin4 {
		background: rgba(22, 119, 255, 0.2);
	}

	.origin5 {
		background: #ffe7ba;
	}

	/* 优惠券为已过期或者已使用状态 */
	.temp-coupon-offline .temp-coupon-item-left,
	.temp-coupon-offline .temp-coupon-type,
	.temp-coupon-offline .temp-coupon-right-get {
		background: #ccc;
		box-shadow: none;
	}
</style>
